<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.1.6/dist/vue-router.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      nav {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 50px;
        line-height: 50px;
        background-color: lavender;
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
      header {
        font-weight: 900;
        font-size: 20px;
        text-align: center;
        width: 100%;
        height: 100px;
        line-height: 100px;
        background-color: lightblue;
      }
      img {
        width: 15px;
        height: 15px;
        position: absolute;
      }
      .content {
        height: 40px;
        background-color: pink;
        cursor: pointer;
        display: block;
      }
      .a {
        display: block;
      }
      .open-enter,
      .open-leave-to {
        width: 0 !important;
      }
      .open-enter-active,
      .open-leave-active {
        transition: all 1s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <nav v-show="show">
        <div>
          <img src="img/index1.png" alt="" />
          <router-link class="a" to="/">首页</router-link>
        </div>
        <div>
          <img src="img/index2.png" alt="" />
          <router-link class="a" to="/friend">朋友</router-link>
        </div>
        <div>
          <img src="img/index3.png" alt="" />
          <router-link class="a" to="/student">同学</router-link>
        </div>
      </nav>

      <router-view></router-view>
    </div>
    <script id="home" type="text/html">
      <div>
          <header>首页</header>
          <p class="content" v-for="(item, index) in 50" :key="index">第{{item}}行</p>
      </div>
    </script>
    <script id="friend" type="text/html">
      <div>
          <header>朋友</header>
          <!-- <p class="content" v-for="(item, index) in items" :key="index" > {{item}}</p> -->
          <router-link  class="content" v-for="(item, index) in items" :key="index" :to="{path:'/friend/txt', query:{username: item}}" > {{item}}</router-link>
      </div>
    </script>
    <script id="student" type="text/html">
      <div>
          <header>同学</header>
          <div>我有个同学</div>
      </div>
    </script>
    <script id="txt" type="text/html">
      <div>
        二级页面
        <h2>{{$route.query.username}}</h2>
        <button><router-link to="/friend">返回</router-link></button>
        <p class="content" v-for="(item, index) in 50" :key="index">第{{item}}行</p>
      </div>
    </script>

    <script>
      const home = { template: "#home" };
      const friend = {
        template: "#friend",
        props: {},
        data() {
          return {
            items: [
              "小明",
              "李磊",
              "韩梅梅",
              "小吴",
              "小王",
              "小李",
              "校长",
              "小林",
              "小刘",
              "小鸡",
              "笑呵呵",
              "张三",
              "李四",
              "王五",
              "赵柳",
              "二狗",
              "刘狗",
              "季狗",
            ],
          };
        },
      };
      const student = { template: "#student" };
      const txt = {
        template: "#txt",
        data() {
          return {
            show: true,
          };
        },
      };

      const routes = [
        { path: "/", component: home },
        { path: "/friend", component: friend },
        { path: "/student", component: student },
        {
          path: "/friend/txt",
          name: "txt",
          component: txt,
        },
      ];

      const router = new VueRouter({
        routes,
      });

      let app = new Vue({
        el: "#app",
        data: {
          show:true
        },
        router,
        watch: {
        $route(to, from){
            // console.log('to：'+to.path, 'from：'+from.path);
            let fromleval = from.path.split('/').length;
            let toleval = to.path.split('/').length;
            // console.log('fromleval：'+fromleval, 'toleval：'+toleval);


            // 只在一级界面显示顶部导航和底部tabbar，其他界面全部隐藏顶部导航和底部tabbar
            if (toleval == 2) {
                this.show = true;
            } else {
                this.show = false;
            }


            
        }
    },
      });
    </script>
  </body>
</html>
